import React from 'react';
import { Table } from 'antd';
import cls from 'classnames';
import '../../styles.less';
import { ManageContext } from '@/components/SchemaComponent/SchemaManage/store/index';

export const CommonTable: React.FC = () => {
  const context = React.useContext(ManageContext);

  let showColumns = React.useMemo(() => {
    let newColumns: any[] = [];
    context?.Table?.columns?.forEach((item: any) => {
      if (item?.visible) {
        newColumns.push({
          ...item,
          showSorterTooltip: false,
        });
      }
    });
    return newColumns;
  }, [context?.Table?.columns]);

  function showTotalInfo(total: any, range: any) {
    let info = '共' + total + '条';
    return info;
  }

  const getPagination = (pageOption: any) => {
    if (pageOption) {
      return {
        ...pageOption,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '30', '50', '100', '300', '500'],
        showTotal: pageOption?.showTotal || showTotalInfo,
        onChange: (current: any, pageSize: any) => {
          const onPageChange = context?.Table?.onPageChange;
          const searchValues = context?.Search?.searchValues;
          const filterDrawerValues = context?.Search?.filterDrawerValues;
          const params = context?.Search?.params;

          if (onPageChange) {
            onPageChange(current, pageSize, {
              ...searchValues,
              ...params,
              ...filterDrawerValues,
            });
          }
        },
      };
    } else {
      return false;
    }
  };
  return (
    <div className={cls('list-layout-table')}>
      <div className={cls('list-table-schemaTable')} id={`manage-table${Math.random()}`}>
        <Table
          bordered
          {...context.Table}
          columns={showColumns}
          size="small"
          scroll={{ x: '100vh', y: 'true' }}
          pagination={getPagination(context?.Table?.pagination)}
        />
      </div>
    </div>
  );
};
